<template>
  <Popup
      :round="round"
      v-model="visible"
      @click-overlay="handleClose"
      :close-on-click-overlay="false"
      :safe-area-inset-bottom="true"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
  >
    <div class="room-call-patient">
      <div class="countdown">{{ `${time / 1000}` }}</div>
      <div class="pick-area-wrap">
        <div class="pick-area">
          <div class="top-header">
            <div class="left">
              <img src="@/components/assets/images/design/1-12.webp"/>
            </div>
            <div class="middle" :style="getStyle('content')">
              {{ info['content'] }}
            </div>
            <div class="right">
              <img src="@/components/assets/images/design/1-12.webp"/>
            </div>
          </div>

          <div class="pick-type">
            <div class="item button-wrap" v-for="(item) in info['options']" :key="item.terminalId">
              <div class="bottom">
                <div class="button" @click="handlePickType(item)">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import {Popup} from 'vant';
import {pxToVw} from '@/utils/common';

export default {
  name: 'ReportSelectBusiness',

  componentName: "ReportSelectBusiness",

  props: {
    visible: {
      type: Boolean,
      required: false
    },
    info: {
      type: Object,
      required: true
    },
  },

  components: {
    Popup,
  },

  data() {
    return {
      round: true,
      time: 60000,
    }
  },

  computed: {
    getStyle() {
      return function (type) {
        const self = this;
        let Obj = Object();
        let info = (self.info) || Object();
        switch (type) {
          case 'content':
            Reflect.set(Obj, 'fontSize', pxToVw(info.fontSize));
            Reflect.set(Obj, 'color', (info.color));
            Reflect.set(Obj, 'fontWeight', (info.fontWeight));
            return Obj
        }

      }
    }
  },

  mounted() {
    // console.log('init')
  },

  methods: {
    //关闭弹层
    handleClose() {
      this.$emit('handle-cancel')
      this.$emit('handleCancel');
    },

    //选择业务
    handlePickType(row) {
      this.$emit('handle-business', row)
      this.$emit('handleBusiness', row);
    }
  },

  watch: {
    visible: {
      handler: function (val) {
        const self = this;
        if (val) {
          self.time = (self.info.time) * 1000;
          self.timer = setInterval(() => {
            self.time = (self.time - 1000);
            if ((self.time) === 0) {
              self.handleClose();
              clearInterval(self.timer)
            }
            // console.log('1关闭倒计时')
          }, 1000)
        } else {
          clearInterval(self.timer)
          // console.log('2关闭倒计时')
        }
      },
      deep: true,
      immediate: true
    }
  },

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
